<template>
  <views>
    <div class="facilitator_info_detail">
      <!-- 代理商信息 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1">
          <viewTitle :title="'基本信息'" :border="false"></viewTitle>
          <div class="basic_information">
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">服务商名称:</div>
                <div class="information_item_content">{{facilitator_name||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">统一信用代码:</div>
                <div class="information_item_content">{{facilitator_code||""}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">法人姓名:</div>
                <div class="information_item_content">{{legal_person||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">证件号码:</div>
                <div class="information_item_content">{{certificate||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">联系人姓名:</div>
                <div class="information_item_content">{{contact_name||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">联系人手机:</div>
                <div class="information_item_content">{{contact_mobile||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">服务商签名:</div>
                <div class="information_item_content">{{label||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">所属地区:</div>
                <div class="information_item_content">{{belong_address||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">单位地址:</div>
                <div class="information_item_content">{{address||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title"></div>
                <div class="information_item_content"></div>
              </div>
            </div>

            <div class="flex basic_information_item_end flexR">
              <div class="flex">
                <div class="information_item_title">营业执照</div>
                <div class="information_item_content">
                  <el-image style="width: 100%; height: 130px" :src="business_licence_img_computed"  :preview-src-list="srcList"></el-image>
                </div>
              </div>
              <div class="flex">
                <div class="information_item_title">身份证</div>
                <div class="information_item_content">
                  <el-image style="width: 100%; height: 130px" :src="cert_img_computed"  :preview-src-list="srcList"></el-image>
                </div>
              </div>
            </div>

            <div class="flex basic_information_item_end flexR">
              <div class="flex">
                <div class="information_item_title">电子印章</div>
                <div class="information_item_content">
                  <el-image style="width: 100%; height: 130px" :src="electron_print_computed" :preview-src-list="srcList"></el-image>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="参数详情" name="2">
          <viewTitle :title="'代付详情'" :border="false"></viewTitle>
          <div class="pay_another">
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">服务商入账账户:</div>
                <div class="information_item_content">{{facilitator_bank_code||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">服务商入账户名:</div>
                <div class="information_item_content">{{facilitator_account_name||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">服务商入账开户行:</div>
                <div class="information_item_content">{{facilitator_bank_name||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">代付商户编号:</div>
                <div class="information_item_content">{{facilitator_pay_code||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">代付商户签名密钥:</div>
                <div class="information_item_content">{{facilitator_sign_key||''}}</div>
              </div>
            </div>

            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">代付商户SM2公钥</div>
                <div class="information_item_content">{{facilitator_sm2_pub||''}}</div>
              </div>
            </div>

            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">代付商户SM2私钥</div>
                <div class="information_item_content">{{facilitator_sm2_key||''}}</div>
              </div>
            </div>
          </div>
          <viewTitle :title="'银行直联参数详情'" :border="false"></viewTitle>
          <!-- 银行直联参数详情 -->
          <div class="coupling_parameters">
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">银企直联用户名:</div>
                <div class="information_item_content">{{bank_and_enterprise_name||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">银企直联密码:</div>
                <div class="information_item_content">{{bank_and_enterprise_password||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">银企直联前置地址:</div>
                <div class="information_item_content">{{bank_and_enterprise_address||''}}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="费率详情" name="3">
          <viewTitle :title="'费率详情'" :border="false"></viewTitle>
          <div class="rate_list">
            <div class="basic_information">
              <div class="flex basic_information_item flexR">
                <div class="flex">
                  <div class="information_item_title">政府补贴费率比例:</div>
                  <div class="information_item_content">{{government_subsidy||''}}</div>
                </div>
                <div class="flex">
                  <div class="information_item_title">增值税率:</div>
                  <div class="information_item_content">{{educational_tariff||''}}</div>
                </div>
              </div>
              <div class="flex basic_information_item flexR">
                <div class="flex">
                  <div class="information_item_title">个人所得税率:</div>
                  <div class="information_item_content">{{personal_tax_rate||''}}</div>
                </div>
                <div class="flex">
                  <div class="information_item_title">地方附加税率:</div>
                  <div class="information_item_content">{{local_surtax_rate||''}}</div>
                </div>
              </div>
              <div class="flex basic_information_item flexR">
                <div class="flex">
                  <div class="information_item_title">技术服务费率:</div>
                  <div class="information_item_content">{{tech_service_rate||''}}</div>
                </div>
                <div class="flex">
                  <div class="information_item_title">差额税率:</div>
                  <div class="information_item_content">{{diff_rate||''}}</div>
                </div>
              </div>
              <div class="flex basic_information_item flexR">
                <div class="flex">
                  <div class="information_item_title">平台代理费率(增值):</div>
                  <div class="information_item_content">{{plat_agent_rate_edu||''}}</div>
                </div>
                <div class="flex">
                  <div class="information_item_title">平台代理费率(差额):</div>
                  <div class="information_item_content">{{plat_agent_rate_diff||''}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </views>
</template>


<script>
export default {
  data() {
    return {
      activeName: "1",
      /*************  基本信息 **************/
      srcList: [], //  营业执照 身份证  电子印章
      facilitator_name: "", //  服务商名称
      legal_person: "", //  法人
      contact_name: "", //  联系人
      label: "", //  服务商签名
      address: "", //  地址
      business_licence_img: "", //  营业执照图片
      electron_print: "", //  电子印章
      facilitator_code: "", //  统一信用代码
      certificate: "", //  证件号码
      contact_mobile: "", //  联系电话
      belong_address: "", //  所属地区
      cert_img: "", //  身份证照片
      protocol_attach: "", //  协议附件地址

      /****************  参数详情  ******************/
      facilitator_bank_code: "", //服务商入账账户
      facilitator_account_name: "", //服务商入账户名
      facilitator_bank_name: "", //服务商入账开户行
      facilitator_pay_code: "", //代付商户编号
      facilitator_sign_key: "", //代付商户签名密钥
      facilitator_sm2_pub: "", //代付商户SM2公钥
      facilitator_sm2_key: "", //代付商户SM2密钥
      bank_and_enterprise_name: "", //银企直联用户名
      bank_and_enterprise_password: "", //银企直联密码
      bank_and_enterprise_address: "", //银企直联前置地址

      /****************  费率详情  ******************/
      government_subsidy : "", //政府补贴费率比例
      educational_tariff : "", //增值税率
      personal_tax_rate : "",  //个人所得税率
      local_surtax_rate : "",  //地方附加税率
      tech_service_rate : "",  //技术服务费率
      diff_rate : "",          //差额税率
      plat_agent_rate_edu : "",	//平台代理费率（增值）
      plat_agent_rate_diff : "",//平台代理费率（差额）
    };
  },
  computed:{
    business_licence_img_computed(){
      return  this.business_licence_img ? this.business_licence_img : this.$store.getters.defaultImg ;
    },
    cert_img_computed(){
      return  this.cert_img ? this.cert_img : this.$store.getters.defaultImg;
    },  
    electron_print_computed(){
      return  this.electron_print ? this.electron_print : this.$store.getters.defaultImg;
    }


  },

  methods: {
    handleClick() {},
    // 获取数据
    // 企业信息-基本信息 【服务商】
    getData_serve() {
      let data = this.$api.sendSync(this.$mapapi.f_facilitatorDetail, {});
      if (data.code != 200&&data.code!=501) {
        this.$message.error(data.msg);
        return;
      }
      this.facilitator_name = data.data.facilitator_name; //  服务商名称
      this.legal_person = data.data.legal_person; //  法人
      this.contact_name = data.data.contact_name; //  联系人
      this.label = data.data.label; //  服务商签名
      this.address = data.data.address; //  地址
      this.business_licence_img = data.data.business_licence_img; //  营业执照图片
      this.electron_print = data.data.electron_print; //  电子印章
      this.facilitator_code = data.data.facilitator_code; //  统一信用代码
      this.certificate = data.data.certificate; //  证件号码
      this.contact_mobile = data.data.contact_mobile; //  联系电话
      this.belong_address = data.data.belong_address; //  所属地区
      this.cert_img = data.data.cert_img; //  身份证照片
      this.protocol_attach = data.data.protocol_attach; //  协议附件地址
      this.srcList = [
        data.data.business_licence_img || "",
        data.data.cert_img || "",
        data.data.electron_print || ""
      ];
    },
    // 企业信息-参数详情 【服务商】
    facilitatorParamDetail() {
      let data = this.$api.sendSync(this.$mapapi.f_facilitatorParamDetail, {});
      if (data.code != 200&&data.code!=501) {
        this.$message.error(data.msg);
        return;
      }
      this.facilitator_bank_code = data.data.facilitator_bank_code; //服务商入账账户
      this.facilitator_account_name = data.data.facilitator_account_name; //服务商入账户名
      this.facilitator_bank_name = data.data.facilitator_bank_name; //服务商入账开户行
      this.facilitator_pay_code = data.data.facilitator_pay_code; //代付商户编号
      this.facilitator_sign_key = data.data.facilitator_sign_key; //代付商户签名密钥
      this.facilitator_sm2_pub = data.data.facilitator_sm2_pub; //代付商户SM2公钥
      this.facilitator_sm2_key = data.data.facilitator_sm2_key; //代付商户SM2密钥
      this.bank_and_enterprise_name = data.data.bank_and_enterprise_name; //银企直联用户名
      this.bank_and_enterprise_password =
        data.data.bank_and_enterprise_password; //银企直联密码
      this.bank_and_enterprise_address = data.data.bank_and_enterprise_address; //银企直联前置地址
    },
    // 企业信息-费率详情 【服务商】
    facilitatorRateDetail() {
      let data = this.$api.sendSync(this.$mapapi.f_facilitatorRateDetail, {});
      if (data.code != 200) {
        this.$message.error(data.msg);
        return;
      }
        this.government_subsidy = data.data.government_subsidy; //政府补贴费率比例
        this.educational_tariff = data.data.educational_tariff; //增值税率
        this.personal_tax_rate = data.data.personal_tax_rate; //个人所得税率
        this.local_surtax_rate = data.data.local_surtax_rate; //地方附加税率
        this.tech_service_rate = data.data.tech_service_rate; //技术服务费率
        this.diff_rate = data.data.diff_rate; //差额税率
        this.plat_agent_rate_edu = data.data.plat_agent_rate_edu; //平台代理费率（增值）
        this.plat_agent_rate_diff = data.data.plat_agent_rate_diff; //平台代理费率（差额）

      console.log("费率详情",data)
    }
  },
  created() {},
  mounted() {
    this.getData_serve();
    this.facilitatorParamDetail();
    this.facilitatorRateDetail();
  }
};
</script>



<style lang="less" :scope="true" >
.facilitator_info_detail {
  background: #ffffff;
  border: 1px solid transparent;
  padding: 10px;
  .basic_information {
    padding: 0 10px;
    width: 70%;
    .basic_information_item_end {
      height: 165px;
      -moz-box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -moz-box-pack: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      .information_item_title {
        width: 130px;
        text-align: left;
      }
      .information_item_content {
        width: 250px;
      }
    }
    .basic_information_item {
      height: 55px;
      -moz-box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -moz-box-pack: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      .information_item_title {
        width: 130px;
        text-align: left;
      }
      .information_item_content {
        width: 250px;
      }
    }
  }
  //   税率
  .rate_list {
    padding: 0 10px;
    border: 1px solid #d7d7d7;
    margin: 15px;
    .basic_information_item_end {
      height: 130px;
      -moz-box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -moz-box-pack: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      .information_item_title {
        width: 130px;
        text-align: left;
      }
      .information_item_content {
        width: 250px;
      }
    }
    .basic_information_item {
      height: 55px;
      -moz-box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -moz-box-pack: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      .information_item_title {
        width: 170px;
        text-align: left;
      }
      .information_item_content {
        width: 250px;
      }
    }
  }

  // 代付详情
  .pay_another {
    padding: 0 20px;
    border: 1px solid #d7d7d7;
    margin: 15px;
    .basic_information_item_end {
      height: 130px;
      -moz-box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -moz-box-pack: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      .information_item_title {
        width: 130px;
        text-align: left;
      }
      .information_item_content {
        width: 250px;
      }
    }
    .basic_information_item {
      height: 55px;
      -moz-box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -moz-box-pack: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      .information_item_title {
        width: 170px;
        text-align: left;
      }
      .information_item_content {
        width: 250px;
      }
    }
  }

  //   银行直联参数详情
  .coupling_parameters {
    padding: 0 20px;
    border: 1px solid #d7d7d7;
    margin: 15px;
    .basic_information_item_end {
      height: 130px;
      -moz-box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -moz-box-pack: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      .information_item_title {
        width: 130px;
        text-align: left;
      }
      .information_item_content {
        width: 250px;
      }
    }
    .basic_information_item {
      height: 55px;
      -moz-box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -moz-box-pack: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      .information_item_title {
        width: 170px;
        text-align: left;
      }
      .information_item_content {
        width: 250px;
      }
    }
  }
}
</style>